<template>
    <!-- 下面第一个图表 -->
    <div id="main9" style="height: 180px; width: 210px;"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            guZhangYiBiaoPanData:0,
            
        };
    },

    methods: {

        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main9"));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                // toolbox: {
                //     show: true,
                //     feature: {
                //         mark: { show: true },
                //         restore: { show: true },
                //         saveAsImage: { show: true }
                //     }
                // },
                series: [
                    {
                        name: '设备故障率',
                        radius: '95%',
                        type: 'gauge',
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [
                                    [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0.1,
                                            color: "#0B95FF"
                                        },
                                        {
                                            offset: 0.6,
                                            color: "#30D27C"
                                        },
                                        {
                                            offset: 1,
                                            color: "#FFC600"
                                        }
                                    ])
                                    ]
                                ],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#228b22'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {    //指针大小
                            width: 3
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '79%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: 'aliceblue',
                            }
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20,
                            offsetCenter: [0, '25%'],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#48b',
                                fontWeight: 'bolder'// 下面data数据的字体设置！！！！

                            }
                        },
                        data: [{ value: this.guZhangYiBiaoPanData.toFixed(0), name: '设备故障率' }]
                    }
                ]
            };
            myChart.setOption(option);
        },
    },
};
</script>
  
<style></style>